<template>
  <div class="content-block">
    <div class="content-main">
      <div class="content-title">
        <div class="title-text-dot">个人审核</div>
        <div class="title-handle">
          <div class="handel-item">
            <el-button type="primary" size="mini" @click="handleSearch"
              >查 询</el-button
            >
          </div>
          <div class="handel-item">
            <el-input
              v-model="searchForm.username"
              size="mini"
              type="text"
              placeholder="用户名"
            ></el-input>
          </div>
          <div class="handel-item">
            <el-input
              v-model="searchForm.mobile"
              size="mini"
              type="text"
              placeholder="手机号"
            ></el-input>
          </div>
          <div class="handel-item">
            <el-input
              v-model="searchForm.name"
              size="mini"
              type="text"
              placeholder="用户真实姓名"
            ></el-input>
          </div>
          <div class="handel-item">
            <el-select
              v-model="searchForm.status"
              placeholder="用户状态"
              style="width: 90%; float: right"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="handel-item">
            <el-select
              v-model="searchForm.userRole"
              placeholder="用户身份"
              style="width: 90%; float: right"
            >
              <el-option
                v-for="item in optionsUserRole"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
      <el-table
        :data="tableList"
        border
        size="mini"
        v-loading="tableLoading"
        height="calc(100vh - 230px)"
        style="width: 100%"
      >
        <el-table-column
          type="index"
          label="序号"
          :index="indexMethod"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="账户头像"
          prop="optResult"
          width="80px"
          align="center"
        >
          <template slot-scope="{ row }">
            <img
              style="width: 45px; height: 45px"
              :src="row.picUrl | imgPreFilter"
              alt=""
              v-if="row.picUrl"
            />
            <i
              v-else
              class="el-icon-picture-outline"
              style="font-size: 50px"
            ></i>
          </template>
        </el-table-column>
        <el-table-column label="昵称" prop="nickname" width="160px"> </el-table-column>
        <el-table-column label="真实姓名" prop="name" width="160px"> </el-table-column>
        <el-table-column label="手机号" prop="mobile" width="160px"> </el-table-column>
        <el-table-column label="身份证号" prop="userCard" width="200px"> </el-table-column>
        <el-table-column label="性别" width="100px">
          <template slot-scope="{ row }">
            <span v-show="row.sex == '2'">女</span>
            <span v-show="row.sex == '1'">男</span>
          </template>
        </el-table-column>
   
        <el-table-column label="状态" width="140px">
          <template slot-scope="{ row }">
            <span v-show="row.authStatus == '0'">未提交认证资料</span>
            <span v-show="row.authStatus == '1'">待审核</span>
            <span v-show="row.authStatus == '2'">审核通过</span>
            <span v-show="row.authStatus == '3'">审核驳回</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="showDetail(scope.row)"
              >详情</el-button
            >

            
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>

     
    <person-detail :userDetail="currentRow" ref="personDetail"></person-detail>
  </div>
</template>

<script>
import { user_list_api } from "@/api/auth.js";
import Api from "../../constants/Api";
import personDetail from "./components/person-detail"
export default {
  components:{
    personDetail
  },
  data() {
    return {
      username: "",
      radio: "",
      arrAtuh: {},
      tableLoading: false,
      tableList: [],
      pageSize: 10,
      pageNum: 1,
      total: 0,
      dialogVisible: false,
      searchForm: {
        mobile: "",
        name: "",
        status: "",
        userRole: "",
        username: "",
      },
      options: [
        {
          value: "0",
          label: "禁用",
        },
        {
          value: "1",
          label: "正常",
        },
      ],
      optionsUserRole: [
        {
          value: "0",
          label: "普通",
        },
        {
          value: "1",
          label: "企业",
        },
        {
          value: "2",
          label: "平台",
        },
      ],
      currentRow:''
    };
  },
  methods: {
    showDetail(item) {
      console.log(item);
      this.currentRow = item;
      this.$refs['personDetail'].show();
      
    },
    checkHandle(val) {
      this.arrAtuh = val;
      this.dialogVisible = true;
    },
    saveCheckAuth() {
      this.$axios({
        method: "post",
        url: Api.checkAuth,
        data: {
          isPass: this.radio,
          userId: this.arrAtuh.userId,
        },
      })
        .then((res) => {
          if (res.code == 20004) {
            this.dialogVisible = false;
            this.$message.success(res.msg);
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(() => {
          this.$message.error(res.msg);
        });
    },
    indexMethod(index) {
      return (this.pageNum - 1) * this.pageSize + 1 + index;
    },
    handleSearch() {
      this.$axios({
        method: "post",
        url: Api.getUserList,
        data: {
          current: this.pageNum,
          pageSize: this.pageSize,
          ...this.searchForm,
        },
      })
        .then((res) => {
          this.tableLoading = false;
          this.total = res.data.total;
          this.tableList = res.data.records;
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },
    handleCurrentChange(n) {
      this.pageNum = n;
      this.__init();
    },
    handleSizeChange() {},
    async __init() {
      this.tableLoading = true;
      let res = await user_list_api({
        current: this.pageNum,

        pageSize: this.pageSize,
        ...this.searchForm,
      });
      this.tableLoading = false;
      // console.log(res.data);
      this.total = res.data.total;
      this.tableList = res.data.records;
    },
  },
  created() {
    this.__init();
  },
};
</script>

<style>
</style>